<template>
    <div class="homePage flex">
        <!-- 导航区域 -->
        <div class="menuVue">
            <div class="menuTop relative" @click="$jump('index')">
                <img src="../assets/menu_logo.png" class="logo absolute_auto">
            </div>
            <el-menu 
                class="el-menu-vertical-demo" 
                :default-active="defaultActive"
                :default-openeds="defaultOpeneds" 
                @select="handleSelect"
                :unique-opened="false"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-cooperation"></i>
                        <span>AI客服配置</span>
                    </template>
                    <el-menu-item index="weChat">微信</el-menu-item>
                    <el-menu-item index="repository">知识库</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-s-platform"></i>
                        <span>聊天管理</span>
                    </template>
                    <el-menu-item index="chatting">聊天会话</el-menu-item>
                    <el-menu-item index="latest">跟进列表</el-menu-item>
                    <el-menu-item index="timing_message">定时消息</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>我的</span>
                    </template>
                    <el-menu-item index="sub_account" v-if="!userPackageInfo.isChild">我的子账号</el-menu-item>
                    <el-menu-item index="my_service">我的套餐</el-menu-item>
                </el-submenu>
                <!-- 管理员权限展示的路由 -->
                <el-submenu index="4" v-if="user.role==='admin'">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>管理员</span>
                    </template>
                    <el-menu-item index="admin_wechat">管理微信</el-menu-item>
                    <el-menu-item index="admin_model">管理模型</el-menu-item>
                    <el-menu-item index="admin_prompt">管理角色</el-menu-item>
                    <el-menu-item index="admin_agent">管理体验Agent</el-menu-item>
                </el-submenu>
                
                <!-- <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-s-help"></i>
                        <span>帮助支持</span>
                    </template>
                    <el-menu-item index="entry_level">快速入门</el-menu-item>
                    <el-menu-item index="faq">常见FAQ</el-menu-item>
                    <el-menu-item index="online_service">在线服务</el-menu-item>
                </el-submenu> -->
            </el-menu>
        </div>

        <!-- 右侧路由区域 -->
        <div class="container">
            <!-- header区域 -->
            <div class="topVue flex_between align_center">
                <div class="flex align_center">
                    <img src="../assets/back.png" class="back" @click="$router.go(-1)" v-if="$route.meta.isBack">
                    <span>{{ $route.meta.title }} > {{ $route.meta.subtitle }}</span>
                </div>
                <div class="flex align_center">
                    <!-- 登录状态 -->
                    <div class="flex align_center" style="cursor: pointer;">
                        <el-dropdown @command="handleCommand" trigger="click">
                            <el-avatar shape="circle" size="medium" :src="user.avatar"></el-avatar>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="1">我的套餐</el-dropdown-item>
                                <el-dropdown-item command="2">修改密码</el-dropdown-item>
                                <el-dropdown-item command="3">修改账号</el-dropdown-item>
                                <el-dropdown-item command="4">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>

            <!-- 路由占位 -->
            <div class="content">
                <div class="routerVue">
                    <router-view></router-view>
                </div>
            </div>
        </div>

        <!-- 修改密码 -->
        <el-dialog title="修改密码" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="20vh" @close="close">
            <div class="dialogVue">
                <div class="inpVue">
                    <div class="label">原密码</div>
                    <el-input v-model="pwdForm.oldPwd" placeholder="请输入原密码" style="margin-top: 15px;"></el-input>
                </div>
                <div class="inpVue margin30">
                    <div class="label">新登录密码</div>
                    <el-input v-model="pwdForm.pwd" placeholder="请设置新登录密码" style="margin-top: 15px;" type="password"></el-input>
                </div>
                <div class="inpVue margin30">
                    <div class="label">确认登录密码</div>
                    <el-input v-model="pwdForm.re_pwd" placeholder="请确认登录密码" style="margin-top: 15px;" type="password"></el-input>
                </div>
                <div class="btn margin40" @click="changePwd">确认</div>
            </div>
        </el-dialog>

        <!-- 变更手机号 -->
        <el-dialog title="修改账号" :visible.sync="dialogTableVisible20" :show-close="true" :center="true" top="20vh" @close="close">
            <div class="dialogVue">
                <div class="inpVue">
                    <div class="label">当前手机号</div>
                    <el-input v-model="user.name" style="margin-top: 15px;" disabled></el-input>
                </div>
                <div class="inpVue margin30">
                    <div class="label">新手机号</div>
                    <el-input v-model="phone" placeholder="请输入新手机号" style="margin-top: 15px;"></el-input>
                </div>
                <div class="inpVue margin30">
                    <div class="label">发送</div>
                    <div class="flex align_center" style="margin-top: 15px;">
                        <el-input v-model="code" placeholder="请输入新手机号验证码" style="flex: 1;"></el-input>
                        <div class="sendCode" @click="sendCode">{{ text }}</div>
                    </div>
                    
                </div>
                <div class="btn margin40" @click="changePhone">
                    <span class="el-icon-loading" v-if="loading" style="color: #fff;"></span>
                    <span v-else style="color: #fff;">确认</span>
                </div>
            </div>
        </el-dialog>

        <vipVue :dialogTableVisible100="dialogTableVisible100"  @beforeClose="beforeClose" ref="vipChild"></vipVue>
        <serviceVue :dialogTableVisible10="dialogTableVisible10" title="联系客服微信" @beforeClose="dialogTableVisible10=false"></serviceVue>
    </div>
</template>
  
<script>
import { toast } from "@/common/tools";
import serviceVue from '@/components/service.vue';
import vipVue from '@/components/vip.vue';
import { mapState } from "vuex";
export default {
    components: {
        vipVue,
        serviceVue
    },
    data(){
        return{
            defaultOpeneds: ["1", "2", "3"],
            defaultActive: "wChat",
            dialogTableVisible: false,
            dialogTableVisible10: false,
            dialogTableVisible20: false,
            dialogTableVisible100: false,
            pwdForm: {
                oldPwd: "",
                pwd: "",
                re_pwd: ""
            },
            phone: "",
            text: "发送",
            code: "",
            loading: false,
        }
    },
    computed: {
        ...mapState({
            user: state => state.user,
            userPackageInfo: state => state.userPackageInfo
        })
    },
    created(){
        this.defaultActive = this.$route.name || "weChat"
    },
    methods: {
        handleSelect(key) {
            if(this.$route.name===key) return
            this.$router.push({
                name: key
            })
            this.defaultActive = key
        },

        handleCommand(command){
            console.log(command)
            switch(command){
                case "1":
                    this.dialogTableVisible100 = true
                    this.$refs.vipChild.init()
                break;
                case "2":
                    this.dialogTableVisible = true
                break;
                case "3":
                    this.dialogTableVisible20 = true
                break;
                case "4":
                    this.$alert(`确认退出系统?`, '退出系统', {
                        confirmButtonText: '确定',
                        confirmButtonClass: 'confirmButtonClass',
                        cancelButtonText: '取消',
                        showCancelButton: true,
                        showClose: false,
                        callback: action => {
                            console.log(action)
                            if(action==="confirm") {
                                this.$post("/front/user/logout").then(res=>{
                                    if(res.data.code===0) {
                                        toast(0, "已退出登录")
                                        window.localStorage.removeItem("ai_token")
                                        window.localStorage.removeItem("user")
                                        this.$router.push({name: "index"})
                                        window.sessionStorage.removeItem("currentWeChatId")
                                        window.sessionStorage.removeItem("currentOnLineStatus")
                                        window.sessionStorage.removeItem("currentUserWechatName")
                                        this.$store.state.statusRandom = -1
                                        this.$store.state.chatting = []
                                        this.$store.state.currentChat = {}
                                    }
                                })
                            }
                        }
                    });   
                break
            }
        },

        close(){
            this.pwdForm = {}
        },

        // 修改登录密码
        async changePwd(){
            let res = await this.$post("/front/user/changePwd", {
                pwd: this.pwdForm.oldPwd,
                newPwd: this.pwdForm.pwd,
                reNewPwd: this.pwdForm.re_pwd
            })
            if(res.data.code===0) {
                toast(0, "修改成功, 请重新登录")
                this.close()
                this.$router.push({name: "login"})
                window.localStorage.removeItem("ai_token")
                window.localStorage.removeItem("user")
                this.$store.state.statusRandom = -1    
            }else {
                toast(1, res.data.msg)
            }
        },

        // 变更手机号
        changePhone(){
            if(!this.phone) return toast(1, "请输入新手机号")
            if(!this.code) return toast(1, "请输入验证码")
            if(this.user.name===this.phone) return toast(1, "新手机号与当前手机号相同")
            if(this.loading) return
            this.loading = true
            this.$post("/front/user/changePhone", {
                phone: this.phone,
                code: this.code
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "变更成功, 请重新登录")
                    this.phone = ""
                    this.code = ""
                    this.loading = false
                    this.$router.push({name: "login"})
                    window.localStorage.removeItem("ai_token")
                    window.localStorage.removeItem("user")
                    this.$store.state.statusRandom = -1  
                } else {
                    this.loading = false
                    toast(1, res.data.msg)
                }
            })
        },

        beforeClose(data){
            this.dialogTableVisible100 = false
            if(data && data==="update") this.dialogTableVisible10 = true
        },

        // 发送验证码
        async sendCode(){
            if(this.text != '发送') return toast(1, this.text + "后可重新获取")
            if(this.accountInfo.userName===this.phone) return toast(1, "新手机号与当前手机号相同")
            if(!mobile(this.phone)) return toast(1, "请输入正确手机号")
            let res = await this.$post("/front/authCode/sendCode", {
                account: this.phone
            })
            if(res.data.code===0) {
                toast(0, "发送成功")
                let count = 60
                this.text = `${count}s`
                let timer = setInterval(()=>{
                count--;
                this.text = `${count}s`;
                    if (count === 0) {
                        clearInterval(timer);
                        this.text = '发送';
                    }
                }, 1000)
            }else{
                toast(1, res.data.msg)
            }
        }
    } 
}
</script>
  
<style lang="less" scoped>
:deep(.el-submenu__title i) {
    font-size: 16px;
}
:deep(.el-dialog) {
    border-radius: 5px;
}
.homePage {
    width: 100vw;
    height: 100vh;
    .menuVue {
        width: 200px;
        height: 100vh;
        background: #fff;
        overflow-y: scroll;
        .menuTop {
            width: 200px;
            height: 60px;
            cursor: pointer;
            .logo {
                width: 120px;
                height: 33px;
                cursor: pointer;
            }
        }
    }
    .menuVue::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .container {
        width: calc(100vw - 200px);
        height: 100vh;
        .topVue {
            width: calc(100vw - 200px);
            height: 60px;
            background: #fff;
            padding: 0 15px;
            span {
                color: #111;
                font-size: 15px;
                font-weight: 600;
            }
            .back {
                width: 20px;
                height: 20px;
                margin-right: 15px;
                cursor: pointer;
            }
        }
        .content {
            width: calc(100vw - 200px);
            height: calc(100vh - 60px);
            background: #f5f5f5;
            padding: 15px;
            .routerVue {
                width: 100%;
                height: 100%;
                background: #fff;
            }
        }
    }
}

.dialogVue {
    width: 100%;
    .inpVue {
        width: 100%;
        .label {
            width: 100px;
            color: #666;
            font-weight: 600;
            font-size: 12px;
        }
        .sendCode {
            color: #0147fd;
            cursor: pointer;
            padding-left: 20px;
        }
    }
    .btn {
        width: 320px;
        height: 42px;
        border-radius: 4px;
        line-height: 42px;
        text-align: center;
        background: #0147fd;
        cursor: pointer;
        color: #fff;
    }
}

:deep(.el-menu) { 
    border-right: none;
}
:deep(.el-dialog) {
    width: 400px;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 20px;
}
:deep(.el-dialog__body) {
    padding: 30px;
}
</style>
  